<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Resizable Div</title>
  <style>
    /* 外层容器，设置宽度和高度 */
    .container {
      width: 100%;
      height: 200px;
      background-color: lightgray;
      position: relative;  /* 设置相对定位，以便定位子元素 */
      display: flex;
    }

    /* 可调整大小的 div */
    .resizable {
      width: 300px;
      height: 100%;
      background-color: lightblue;
      position: relative;

      cursor: ew-resize; /* 设置鼠标样式为水平拖动 */
    }

    /* 右侧拖拽手柄 */
    .resize-handle {
      width: 15px;
      height: 100%;
      transform: translateX(50%);
      position: absolute;
      right: 0;
      top: 0;
      cursor: ew-resize; /* 设置拖拽鼠标样式 */
      display: flex;
      justify-content: center;
    }
.a{
  background-color: red;
  width: 1px;
  height: 100%;
}
  </style>
</head>
<body>

<div class="container">

  <div class="resizable">

    <div class="resize-handle">
      <div class="a"></div>
    </div>
    
  </div>
  <div>asdasdasd</div>

</div>

<script>
  // 获取可调整大小的 div 和拖拽手柄
  const resizable = document.querySelector('.resizable');
  const resizeHandle = document.querySelector('.resize-handle');

  let isResizing = false;  // 是否正在拖动
  let lastX = 0;           // 上一次鼠标位置

  // 监听鼠标按下事件，开始拖动
  resizeHandle.addEventListener('mousedown', (e) => {
    isResizing = true;
    lastX = e.clientX;  // 记录鼠标按下时的 X 坐标
    document.body.style.userSelect = 'none';  // 禁止文本选择
  });

  // 监听鼠标移动事件，拖动时调整宽度
  document.addEventListener('mousemove', (e) => {
    if (!isResizing) return;

    const offsetX = e.clientX - lastX;  // 计算鼠标移动的距离
    const newWidth = resizable.offsetWidth + offsetX;  // 计算新的宽度
    resizable.style.width = `${newWidth}px`;  // 更新宽度

    lastX = e.clientX;  // 更新鼠标位置
  });

  // 监听鼠标松开事件，结束拖动
  document.addEventListener('mouseup', () => {
    isResizing = false;
    document.body.style.userSelect = '';  // 恢复文本选择
  });
</script>

</body>
</html>